// defineConfig获得更好的类型提示
const { defineConfig } = require('@vue/cli-service')
const path = require("path");
const resolve = dir => path.join(__dirname, dir);
const Timestamp = new Date().getTime()
module.exports = defineConfig({
    // transpileDependencies #
    // Type: boolean | Array<string | RegExp>
    // Default: false
    // 默认情况下 babel-loader 会忽略所有 node_modules 中的文件。你可以启用本选项，以避免构建后的代码中出现未转译的第三方依赖。
    // 不过，对所有的依赖都进行转译可能会降低构建速度。如果对构建性能有所顾虑，你可以只转译部分特定的依赖：给本选项传一个数组，列出需要转译的第三方包包名或正则表达式即可。
    publicPath: '/hlBigScreen',  //基本路径
	  // publicPath: process.env.NODE_ENV === 'production' ? '/' : '/testpc',  // 公共路径
    outputDir: 'dist', //构建时的输出目录
    assetsDir: 'static',//放置静态资源的目录
    indexPath: 'index.html',//html 的输出路径
    filenameHashing: true,//文件名哈希值 设置打包生成的的静态资源的文件名中是否加入hash以便控制浏览器缓存问题,可以不加下面的js和css解决缓存问题的代码。
    lintOnSave: true,//是否在保存的时候使用 `eslint-loader` 进行检查。

    //组件是如何被渲染到页面中的？ （ast：抽象语法树；vDom：虚拟DOM）
    //template ---> ast ---> render ---> vDom ---> 真实的Dom ---> 页面
    //runtime-only：将template在打包的时候，就已经编译为render函数
    //runtime-compiler：在运行的时候才去编译template
    runtimeCompiler: false,

    transpileDependencies: [],//babel-loader 默认会跳过 node_modules 依赖。
    productionSourceMap: false,//是否为生产环境构建生成 source map？

    //调整内部的 webpack 配置
    // configureWebpack: config => {
    //   // 打包编译后修改 js 文件名,解决浏览器缓存问题
    //   config.output.filename = `assets/js/[name].${Timestamp}.js`;
    //   config.output.chunkFilename = `assets/js/[name].${Timestamp}.js`;
    // },
    chainWebpack: config => {
        config.resolve.alias
            .set("@", resolve("src"))
            .set("@assets", resolve("src/assets"))
            .set("@components", resolve("src/components"))
            .set("@views", resolve("src/views"))
            .set("@router", resolve("src/router"))
    },
    css: {
        // extract: {
        //     // 打包编译后修改 css 文件名,解决浏览器缓存问题
        //     filename: `assets/css/[name].${Timestamp}.css`,
        //     chunkFilename: `assets/css/[name].${Timestamp}.css`
        // },
        sourceMap: true,
        // loaderOptions: {
        //     postcss: {
        //       postcssOptions: {
        //         plugins: [
        //           [
        //             'postcss-px-to-viewport',
        //             {
        //               unitToConvert: 'px',    // 需要转换的单位，默认为"px"
        //               viewportWidth: 1920,     // 设计稿的视窗宽度
        //               unitPrecision: 5,       // 单位转换后保留的精度
        //               // propList: ['*', '!font-size'],        // 能转化为 vw 的属性列表
        //               propList: ['*'],        // 能转化为 vw 的属性列表
        //               viewportUnit: 'vw',     // 希望使用的视窗单位
        //               fontViewportUnit: 'vw', // 字体使用的视窗单位
        //               selectorBlackList: [],  // 需要忽略的 CSS 选择器，不会转为视窗单位，使用原有的 px 等单位
        //               minPixelValue: 1,       // 设置最小的转换数值，如果为 1 的话，只有大于 1 的值会被转换
        //               mediaQuery: false,      // 媒体查询里的单位是否需要转换单位
        //               replace: true,          // 是否直接更换属性值，而不添加备用属性
        //               exclude: undefined,     // 忽略某些文件夹下的文件或特定文件，例如 'node_modules' 下的文件
        //               include: /\/src\//,     // 如果设置了include，那将只有匹配到的文件才会被转换
        //               landscape: false,       // 是否添加根据 landscapeWidth 生成的媒体查询条件
        //               landscapeUnit: 'vw',    // 横屏时使用的单位
        //               landscapeWidth: 1920,   // 横屏时使用的视窗宽度
        //             },
        //           ],
        //         ],
        //       },
        //     }
        // }
		
        //   sourceMap: true,
        // loaderOptions: {
        //     postcss: {
        //         plugins: [
        //             require("postcss-pxtorem")({
        //                 // 设计稿为750px时为75
        //                 // 设计图的宽度/10 比如你的设计图是1920的宽度 这里你就1920/10=192
        //                 remUnit: 75,
        //                 remPrecision: 8//换算的rem保留几位小数点
        //             })
        //         ]
        //     }
        // },
        // requireModuleExtension: true
    },
    // 配置 webpack-dev-server 行为。
    devServer: {
        open: false, //编译后默认打开浏览器
        host: '0.0.0.0',  //域名
        port: 3030,  // 端口
        https: false,  //是否https
        //webpack5配置需要client包裹，显示警告和错误
        client: {
            overlay: {
                errors: true,
                warnings: false,
            },
        },
        proxy: {
            '/bygex': {
                target: 'http://58.222.197.62:10018/',
                // target: 'https://8.136.193.200/',
                // target: 'http://60.191.72.66:10082/',
                changeOrigin: true, //是否跨域
                ws: false, //是否支持websocket
                secure: false, //如果是https接口，需要配置这个参数
                // pathRewrite: {
                //     "^/loginAccount": "/"  // 发送请求时，请求路径重写：将 /loginAccount/xxx --> /xxx （去掉/loginAccount）
                // }
            }
        }
    }
})
